<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools 1.3 参考文档 - Interface/HtmlTable.Select</title>
</head>

<body>
  <div class="doc">
    <div class="methods">
      <h4 class="menu-item"><a href="#HtmlTable">HtmlTable</a></h4>
      <div class="menu-item"><a href="#HtmlTable:enableSelect">enableSelect</a></div>
      <div class="menu-item"><a href="#HtmlTable:toggleRow">toggleRow</a></div>
      <div class="menu-item"><a href="#HtmlTable:selectRow">selectRow</a></div>
      <div class="menu-item"><a href="#HtmlTable:deslectRow">deslectRow</a></div>
      <div class="menu-item"><a href="#HtmlTable:isSelected">isSelected</a></div>
      <div class="menu-item"><a href="#HtmlTable:getSelected">getSelected</a></div>
      <div class="menu-item"><a href="#HtmlTable:selectRange">selectRange</a></div>
      <div class="menu-item"><a href="#HtmlTable:deselectRange">deselectRange</a></div>
      <div class="menu-item"><a href="#HtmlTable:selectAll">selectAll</a></div>
      <div class="menu-item"><a href="#HtmlTable:selectNone">selectNone</a></div>
    </div>
    <div class="l-border r-border span-15 content">
      <h1 id="HtmlTable"><a href="#HtmlTable">Class: HtmlTable.Select</a></h1>
      <p class="description">Adds the ability to select rows in a table.</p>
      <h3>Refactors</h3>
      <ul>
        <li><a href="../../../docs/more/Interface/HtmlTable.html">HtmlTable</a></li>
      </ul>
      <h3>Syntax</h3>
      <pre class="javascript"><span class="kw2">new</span> HtmlTable<span class="br0">(</span><span class="br0">[</span>table, options<span class="br0">]</span><span class="br0">)</span>;
</pre>
      <h3>Arguments</h3>
      <ol>
        <li>table - (<em>mixed</em>; 可选) - a Table DOM element or it's id; if you do not specify one, one will be created.</li>
        <li>options - (<em>object</em>; 可选) a key/value set of options.</li>
      </ol>
      <h3>Options</h3>
      <ul>
        <li>all options defined by <a href="../../../docs/more/Interface/HtmlTable.html">HtmlTable</a>, plus:</li>
        <li>classZebra - (<em>string</em>) the class added to odd numbered rows; defaults to 'table-tr-odd'</li>
        <li>useKeyboard - (<em>boolean</em>) if <em>true</em> (the default) allows for the use of arrows to navigate rows and <em>enter</em> to select them.</li>
        <li>classRowSelected - (<em>string</em>) the class to add to the tr that is selected; defaults to 'table-tr-selected'</li>
        <li>classRowHovered - (<em>string</em>) the class to add to the tr that is hovered over by the mouse or has focus with the keyboard; defaults to 'table-tr-hovered'</li>
        <li>classSelectable - (<em>string</em>) the class to add to the table when selection is enabled; defaults to 'table-selectable'</li>
        <li>selectable - (<em>boolean</em>) if <em>true</em> the rows will be selectable. Defaults to <em>false</em>.</li>
        <li>allowMultiSelect - (<em>boolean</em>) if <em>true</em> (the default) the user can select more than one row at a time.</li>
        <li>shiftForMultiSelect - (<em>boolean</em>) enables support for holding shift to multi-select files (defaults to <em>false</em>). If <em>false</em> (and <code>allowMultiSelect</code> is <em>true</em>), clicking any row selects it.</li>
      </ul>
      <h3>Events</h3>
      <ul>
        <li>rowFocus - callback to execute when a row is selected.</li>
        <li>rowUnfocus - callback to execute when a row is deselected.</li>
      </ul>
      <h3>Example</h3>
      <pre class="javascript"><span class="kw2">var</span> myTable = <span class="kw2">new</span> HtmlTable<span class="br0">(</span><span class="br0">{</span>

    properties: <span class="br0">{</span>
        border: <span class="nu0">1</span>,
        cellspacing: <span class="nu0">3</span>
    <span class="br0">}</span>,
    rows: <span class="br0">[</span>
        <span class="br0">[</span><span class="st0">'apple'</span>, <span class="st0">'red'</span><span class="br0">]</span>,
        <span class="br0">[</span><span class="st0">'lemon'</span>, <span class="st0">'yellow'</span><span class="br0">]</span>

    <span class="br0">]</span>,
    selectable: <span class="kw2">true</span>
<span class="br0">}</span><span class="br0">)</span>;
myTable.<span class="me1">inject</span><span class="br0">(</span>$<span class="br0">(</span><span class="st0">'someContainer'</span><span class="br0">)</span><span class="br0">)</span>;
</pre>
      <h2 id="HtmlTable:enableSelect"><a href="#HtmlTable:enableSelect">HtmlTable method: enableSelect</a></h2>
      <p class="description">Enables selection of rows.</p>
      <h3>Syntax</h3>
      <pre class="javascript">myTable.<span class="me1">enableSelect</span><span class="br0">(</span><span class="br0">)</span>;

</pre>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This instance of HtmlTable.</li>
      </ul>
      <h2 id="HtmlTable:toggleRow"><a href="#HtmlTable:toggleRow">HtmlTable method: toggleRow</a></h2>
      <p class="description">Toggles the selected state of a row.</p>
      <h3>Syntax</h3>
      <pre class="javascript">myTable.<span class="me1">toggleRow</span><span class="br0">(</span>trElement<span class="br0">)</span>;
</pre>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This instance of HtmlTable.</li>
      </ul>
      <h2 id="HtmlTable:selectRow"><a href="#HtmlTable:selectRow">HtmlTable method: selectRow</a></h2>
      <p class="description">Selects a row.</p>
      <h3>Syntax</h3>
      <pre class="javascript">myTable.<span class="me1">selectRow</span><span class="br0">(</span>trElement<span class="br0">)</span>;
</pre>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This instance of HtmlTable.</li>
      </ul>
      <h2 id="HtmlTable:deslectRow"><a href="#HtmlTable:deslectRow">HtmlTable method: deselectRow</a></h2>
      <p class="description">Selects a row.</p>
      <h3>Syntax</h3>
      <pre class="javascript">myTable.<span class="me1">deselectRow</span><span class="br0">(</span>trElement<span class="br0">)</span>;
</pre>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This instance of HtmlTable.</li>
      </ul>
      <h2 id="HtmlTable:isSelected"><a href="#HtmlTable:isSelected">HtmlTable method: isSelected</a></h2>
      <p class="description">Returns the selected state of a row element.</p>
      <h3>Syntax</h3>
      <pre class="javascript">myTable.<span class="me1">isSelected</span><span class="br0">(</span>trElement<span class="br0">)</span>;
</pre>
      <h3>Returns</h3>
      <ul>
        <li>(<em>boolean</em>) <em>true</em> if the row is selected.</li>
      </ul>
      <h2 id="HtmlTable:getSelected"><a href="#HtmlTable:getSelected">HtmlTable method: getSelected</a></h2>
      <p class="description">Returns an array of rows that are selected.</p>
      <h3>Syntax</h3>
      <pre class="javascript">myTable.<span class="me1">getSelected</span><span class="br0">(</span><span class="br0">)</span>;
</pre>
      <h3>Returns</h3>
      <ul>
        <li>(<em>array</em>) an array of TR elements that are selected.</li>
      </ul>
      <h2 id="HtmlTable:selectRange"><a href="#HtmlTable:selectRange">HtmlTable method: selectRange</a></h2>
      <p class="description">Selects a group of rows.</p>
      <h3>Syntax</h3>
      <pre class="javascript">myTable.<span class="me1">selectRange</span><span class="br0">(</span>startRow, endRow<span class="br0">)</span>;
</pre>
      <h3>Arguments</h3>
      <ul>
        <li>startRow - (<em>mixed</em>) the TR element that starts the selection or an integer of its index in the rows in the table body.</li>
        <li>endRow - (<em>mixed</em>) the TR element that ends the selection or an integer of its index in the rows in the table body.</li>
      </ul>
      <h3>Note</h3>
      <p>The actual order of the start and end rows doesn't matter. The range is selected even if the end row is before the start row.</p>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This instance of HtmlTable.</li>
      </ul>
      <h2 id="HtmlTable:deselectRange"><a href="#HtmlTable:deselectRange">HtmlTable method: deselectRange</a></h2>
      <p class="description">Deselects a group of rows.</p>
      <h3>Syntax</h3>
      <pre class="javascript">myTable.<span class="me1">deselectRange</span><span class="br0">(</span>startRow, endRow<span class="br0">)</span>;
</pre>
      <h3>Arguments</h3>
      <ul>
        <li>startRow - (<em>element</em>) the TR element that starts the deselection.</li>
        <li>endRow - (<em>element</em>) the TR element that ends the deselection.</li>
      </ul>
      <h3>Note</h3>
      <p>The actual order of the start and end rows doesn't matter. The range is deselected even if the end row is before the start row.</p>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This instance of HtmlTable.</li>
      </ul>
      <h2 id="HtmlTable:selectAll"><a href="#HtmlTable:selectAll">HtmlTable Method: selectAll</a></h2>
      <p class="description">Selects all rows</p>
      <h3>Syntax</h3>
      <pre class="javascript">myHtmlTable.<span class="me1">selectAll</span><span class="br0">(</span><span class="br0">)</span>;
</pre>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This instance of HtmlTable.</li>
      </ul>
      <h2 id="HtmlTable:selectNone"><a href="#HtmlTable:selectNone">HtmlTable Method: selectNone</a></h2>
      <p class="description">Deselects all rows</p>
      <h3>Syntax</h3>
      <pre class="javascript">myHtmlTable.<span class="me1">selectNone</span><span class="br0">(</span><span class="br0">)</span>;
</pre>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This instance of HtmlTable.</li>
      </ul>
    </div>
  </div>
<script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
